<script setup>
import { LikeOutlined, LikeFilled, DislikeOutlined, DislikeFilled, CommentOutlined } from '@ant-design/icons-vue';
import dayjs from "dayjs";
import 'dayjs/locale/zh-cn';
import relativeTime from 'dayjs/plugin/relativeTime'
import { message } from "ant-design-vue";
import axios from "axios";

dayjs.locale( 'zh-cn' );
dayjs.extend( relativeTime );


const likes = ref( 0 );
const dislikes = ref( 0 );
const action = ref();
const like = () => {
  likes.value += 1;
  action.value = 'liked';
};
const dislike = () => {
  dislikes.value += 1;
  action.value = 'disliked';
}
const commentModal = ref( false );
const handleCommentModal = () => {
  commentModal.value = !commentModal.value
}

const submitting = ref( false );
const commentValue = ref( '' );
const handleSubmit = () => {
  if ( !commentValue.value ) {
    message.error( '请输入评论内容' );
    return;
  }
  submitting.value = true;
  setTimeout( () => {
    submitting.value = false;
    comments.value = [
      {
        author : 'Han Solo',
        avatar : 'http://local.thinkphp.com/storage/avatar/91httplogo.jpg',
        content : commentValue.value,
        datetime : dayjs().fromNow(),
      },
      ...comments.value,
    ];
    commentValue.value = '';
  }, 1000 );
};

const userInfo = ref();
const comments = ref( [
  {
    author : 'Han Solo',
    avatar : 'http://local.thinkphp.com/storage/avatar/91httplogo.jpg',
    content : 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
    datetime : '2024-05-23 12:26:52',
  },
] );
const getCommentList = () => {
  axios.get( import.meta.env.VITE_API_URL + '/comment-list', { params : { article_id : 1 } } )
}
onMounted( () => {
  // 获取用户信息
  userInfo.value = JSON.parse( localStorage.getItem( 'userInfo' ) );
  // 获取评论列表
  getCommentList();
} );
</script>

<template>
  <a-typography>
    <a-typography-title>介绍</a-typography-title>
    <a-typography-paragraph>
      蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
    </a-typography-paragraph>
    <a-typography-paragraph>
      随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，逐步打磨出一个服务于企业级产品的设计体系
      Ant Design。基于
      <a-typography-text mark>『确定』和『自然』</a-typography-text>
      的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于
      <a-typography-text strong>更好的用户体验</a-typography-text>
      。
    </a-typography-paragraph>
    <a-typography-title :level="2">设计资源</a-typography-title>
    <a-typography-paragraph>
      我们提供完善的设计原则、最佳实践和设计资源文件（
      <a-typography-text code>Sketch</a-typography-text>
      和
      <a-typography-text code>Axure</a-typography-text>
      ），来帮助业务快速设计出高质量的产品原型。
    </a-typography-paragraph>
    
    <a-typography-paragraph>
      <ul>
        <li>
          <a-typography-link href="/docs/resources-cn">设计资源</a-typography-link>
        </li>
      </ul>
    </a-typography-paragraph>
    
    <a-typography-paragraph>
      <blockquote>AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV
        经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV
        产品的严苛考验。我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。
      </blockquote>
      <pre>AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。</pre>
    </a-typography-paragraph>
    
    <a-typography-paragraph>
      按
      <a-typography-text keyboard>Esc</a-typography-text>
      键退出阅读……
    </a-typography-paragraph>
  </a-typography>
  <a-divider/>
  <a-button type="primary" @click="handleCommentModal">
    <CommentOutlined/>
    评论
  </a-button>
  <template v-if="commentModal">
    <a-comment>
      <template #avatar>
        <a-avatar src="http://local.thinkphp.com/storage/avatar/91httplogo.jpg" alt="Han Solo"/>
      </template>
      <template #author>
        <a-tooltip>Han Solo</a-tooltip>
      </template>
      <template #content>
        <a-form-item>
          <a-textarea v-model:value="commentValue" :rows="4"/>
        </a-form-item>
        <a-form-item>
          <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit" :disabled="!commentValue">
            {{ submitting ? '提交中...' : '提交评论' }}
          </a-button>
        </a-form-item>
      </template>
    </a-comment>
  </template>
  
  <a-list v-if="comments.length" :data-source="comments" item-layout="horizontal">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-comment>
          <template #avatar>
            <a-avatar :src="item.avatar" alt="Han Solo"></a-avatar>
          </template>
          <template #author>
            <a>{{ item.author }}</a>
          </template>
          <template #datetime>
            <a-tooltip>{{ dayjs( item.datetime ).fromNow() }}</a-tooltip>
          </template>
          <template #content>
            <p>{{ item.content }}</p>
          </template>
          <template #actions>
            <span key="comment-basic-like">
              <a-tooltip title="Like">
                <template v-if="action === 'liked'">
                  <LikeFilled @click="like"/>
                </template>
                <template v-else>
                  <LikeOutlined @click="like"/>
                </template>
              </a-tooltip>
              <span style="padding-left: 8px; cursor: auto">
                {{ likes }}
              </span>
            </span>
            <span key="comment-basic-dislike">
              <a-tooltip title="Dislike">
                <template v-if="action === 'disliked'">
                  <DislikeFilled @click="dislike"/>
                </template>
                <template v-else>
                  <DislikeOutlined @click="dislike"/>
                </template>
              </a-tooltip>
              <span style="padding-left: 8px; cursor: auto">
                {{ dislikes }}
              </span>
            </span>
            <span key="comment-basic-reply-to">Reply to</span>
          </template>
        </a-comment>
      </a-list-item>
    </template>
  </a-list>

</template>

<style scoped>

</style>